<template>
  <div>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.id">
        <router-link :to="'/home/newsinfo/' + item.id">
          <img class="mui-media-object mui-pull-left" :src='"@/assets/images/new1.jpg"' />
          <div class="mui-media-body">
            <h1>{{ item.title }}</h1>
            <p class="mui-ellipsis">
              <span>发表时间：{{ item.add_time | dateFormat }}</span>
              <span>点击：{{item.click}}次</span>
            </p>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 新闻列表
      newslist: [
        {
          id:13,
          title: "克利夫兰骑士",
          add_time: "2018-06-15T03:40:21.000Z",
          zhaiyao: "2018年击败金州勇士，获得NBA总冠军",
          click: 2300,
          img_url: "@/assets/images/new1.jpg"
        },
        {
          id:6,
          title: "迈阿密热火",
          add_time: "2010-09-22T06:11:00.000Z",
          zhaiyao: "成功招募詹姆斯、波什，组成三巨头",
          click: 666,
          img_url: "@/assets/images/new2.jpg"
        },
        {
          id:3,
          title: "洛杉矶湖人",
          add_time: "2020-03-22T12:11:00.000Z",
          zhaiyao: "登顶西部第一，傲视联盟",
          click: 300,
          img_url: "@/assets/images/new3.jpg"
        },
      ],
      time: '2020-03-22T13:40:21.000Z',
      id: 1
    };
  },
  // created() {
  //   this.getNewsList();
  // },
  // methods: {
  //   getNewsList() {
  //     // 获取新闻列表
  //     this.$http.jsonp("http://vue.studyit.io/api/getnewslist").then(result => {
  //       if (result.body.status === 0) {
  //         // 如果没有失败，应该把数据保存到 data 上
  //         this.newslist = result.body.message;
  //         console.log(result.body);
  //       } else {
  //         Toast("获取新闻列表失败！");
  //       }
  //     });
  //   }
  // }
};
</script>

<style lang="scss" scoped>
.mui-table-view {
  li {
    h1 {
      font-size: 14px;
    }
    .mui-ellipsis {
      font-size: 12px;
      color: #226aff;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>